<template>
    <div class="wrapper">
        <div class="loginWrapper">
            <el-input  class="input" v-model="idNumber" type="number"  placeholder="学号" icon="more" size="large" style="margin-top: 150px;"></el-input>
            <el-input  class="input" v-model="password" type="password" placeholder="密码" icon="more" size="large"></el-input>
            <br><br>
            <el-switch class="switch" :width=75 v-model="mark" on-text="记住我" off-text="忘记我" on-color="#13CE66" :change="save()"></el-switch>
            <br>
            <el-button class="button" size="large" type="success" v-on:click="login()">登录</el-button>
        </div>   
    </div>
</template>

<script>
    export default {
        created: function() {
            if(localStorage.idNumber && localStorage.password) {
                this.idNumber = localStorage.idNumber
                this.password = localStorage.password
            }
        },
        data: function() {
            return {
                idNumber: '',
                password: '',
                mark: true
            }
        },
        methods: {
            save: function() {
                if(this.mark == true) {
                    localStorage.idNumber = this.idNumber
                    localStorage.password = this.password
                }
                else {
                    localStorage.removeItem("idNumber")
                    localStorage.removeItem("password")
                }
            },
            login: function() {
                if(this.idNumber.length >= 6 && this.password.length >= 6) {
                    this.$http({
                        method: 'POST',
                        url: '/api/login',
                        body: {
                            idNumber: this.idNumber,
                            password: this.password
                        }
                    }).then( response => {
                        if(response.data.errno == 200){
                            localStorage.token = response.data.data.token
                            if(this.idNumber.length == 10){
                                this.$router.replace('/Student/noticeS')
                            }
                            else if(this.idNumber.length == 8) {
                                this.$router.replace('/Teacher/noticeT')
                            }
                            else if(this.idNumber.length == 6) {
                                this.$router.replace('/Admin')
                            }
                        }  
                        else {
                            this.$notify({
                                title: '账号或密码错误！',
                                type: 'success',
                                offset: 100
                            })
                        }            
                    })
                }
                else{
                    this.$notify({
                            title: '请检查账号和密码！',
                            type: 'success',
                            offset: 100
                    })
                }
            }      
        },
        watch: {
            idNumber: function() {
                if(this.mark == true) {
                    localStorage.idNumber = this.idNumber
                }
                else {
                    localStorage.removeItem("idNumber")
                }
            },
            password: function() {
                if(this.mark == true) {
                    localStorage.password = this.password
                }
                else {
                    localStorage.removeItem("password")
                }
            }
        }
    }
</script>

<style scoped>
    .loginWrapper{
        width: 400px;
        height: 500px;
        background: #FFFFFF;
        margin: 0 auto;
        position: relative;
        top: 100px;
    }
    .input{
        width: 300px;
        height: 50px;
    }
    .button{
        width: 200px;
        margin: 80px auto;
    }
    .switch{
        position: relative;
        left: 100px;
    }
</style>
